<template>
    <div>
        <el-row>
            <el-col :span="16">
                <div class="home_header-no">
                    <img class="img_left" src="../../assets/images/welcome/home-header.png" />
                    <div style="margin-left: 10px">
                        <h2>您好！{{ nickName }}</h2>
                        <div style="margin-top: 10px">
                            今天是{{ $parseTime(new Date(), '{y}-{m}-{d}') }}<span class="ml10">星期{{
                                "日一二三四五六".charAt(new Date().getDay())
                            }}，欢迎使用,祝您心情美好，开心每一天。</span>
                        </div>
                    </div>
                    <img class="img_right" src="../../assets/images/welcome/home-header-bg.png" />
                </div>
                <div style="margin-bottom: 25px;">
                    <div style="display: flex; margin-bottom: 5px">
                        <!--按用户角色展示不同首页卡片-->
                        <div class="card-wrap-class">
                            <div class="card-wrap-class-content">
                                <img src="../../assets/images/welcome/waiting-patients.png" />
                                <div>
                                    <nav>待诊人数</nav>
                                    <h2 class="text-blue" @click="doDeal('apply')">
                                        {{ totalInfo.submit }}
                                    </h2>
                                </div>
                            </div>
                        </div>
                        <div class="card-wrap-class" style="margin-left: 10px">
                            <div class="card-wrap-class-content">
                                <img src="../../assets/images/welcome/diagnosed-patients.png" />
                                <div>
                                    <nav>已诊人数</nav>
                                    <h2 class="text-purple" @click="doDeal('start')">
                                        {{ totalInfo.start }}
                                    </h2>
                                </div>
                            </div>
                        </div>
                        <div class="card-wrap-class" style="margin-left: 10px">
                            <div class="card-wrap-class-content">
                                <img src="../../assets/images/welcome/wiating-money.png" />
                                <div>
                                    <nav>待收费金额(元)</nav>
                                    <h2 class="text-bule-green" @click="doDeal('sign')">
                                        {{ totalInfo.sign }}
                                    </h2>
                                </div>
                            </div>
                        </div>
                        <div class="card-wrap-class" style="margin-left: 10px">
                            <div class="card-wrap-class-content">
                                <img src="../../assets/images/welcome/diagnosed-money.png" />
                                <div>
                                    <nav>已收费金额(元)</nav>
                                    <h2 class="text-bule-purple" @click="doDeal('report')">
                                        {{ totalInfo.report }}
                                    </h2>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div>
                    <el-card>
                        <template #header>
                            <div class="card-header">
                                <span>快捷导航栏<el-button class="ml20" style="color: rgb(31 79 226);float: right;" link
                                        @click="shortcutNavigationClick">
                                        添加快捷导航
                                    </el-button></span>
                            </div>
                        </template>
                        <div v-if="fastMenu.length > 0 && fastMenu[0].icon" style="height: 280px;overflow-y: auto;">
                            <el-row>
                                <div v-for="(item, index) in fastMenu">
                                    <div :key="index" class="ckeck-btn fast-item" @click="onChooseItem(item)">
                                        <el-card style="height: 100%;">
                                            <svg-icon :icon-class="item.icon" class="svg-icon-nav" />
                                            <i :style="{ color: getMenuColor(index) }" class="iconfont"></i>
                                            <span class="span">{{ item.title }}</span>
                                        </el-card>
                                    </div>
                                </div>
                            </el-row>
                        </div>
                        <div v-else>暂无数据</div>
                    </el-card>
                </div>
                <!--                <div>-->
                <!--                    <el-card class="update-log">-->
                <!--                        <div slot="header" class="clearfix">-->
                <!--                            <span>阳性</span>-->
                <!--                        </div>-->
                <!--                    </el-card>-->
                <!--                </div>-->
            </el-col>
            <el-col :span="8">
                <div class="calendar-container">
                    <el-calendar v-model="dateValue" class="custom-calendar">
                        <template #date="{ date }">
                            <div class="date-cell">
                                <span class="day">{{ date.getDate() }}</span>
                                <!-- <span v-if="isSelected(date)" class="red-star">*</span> -->

                            </div>
                        </template>
                    </el-calendar>
                </div>
            </el-col>
        </el-row>
        <shortcut-navigation ref="shortcutNavigation" @refreshParent="refreshParent" />
    </div>
</template>

<script lang="ts" setup>
import { getShortcutNavigation } from "@/api/welcomeApi"
import ShortcutNavigation from "@/components/welcome/ShortcutNavigation.vue"
import { useRouter } from "vue-router"
import { useUserStoreHook } from "@/store/modules/user"
import path from "path-browserify";
const { proxy } = getCurrentInstance() as any
const useUserStore = useUserStoreHook()
const router = useRouter()
const userInfo = <UserInfoBusi>useUserStore.user.userInfo


type totalInfoType = {
    submit: number,
    start: number,
    report: number,
    sign: number
}
const userId: Ref<string> = ref(userInfo.userId)
const dateValue = reactive(new Date())
const nickName: Ref<string> = ref(userInfo.nickName)
let totalInfo: any = reactive<totalInfoType>({
    submit: 10,
    start: 102,
    report: 110,
    sign: 100,
})

const shortcutNavigation = ref()
let fastMenu: Ref<any[]> = ref([{}])
const colorList = reactive(["#5584fd", "#3470ff", "#ff8801", "#00d6b9", "#7e3bf3"])

onMounted(() => {
    getList()
})

const onChooseItem = (item: { path: any; }) => {
    console.log("item", item);
    router.push({ path: item.path });
}
const getMenuColor = (index) => {
    return colorList[index % 4];
}
const refreshParent = () => {
    getList()
}
const getList = () => {
    let menuList: any[] = []
    getShortcutNavigation(userId.value).then(res => {
        if (res.data) {
            res.data.forEach(item => {
                let sysMenu = {
                    title: item.menuName,
                    children: [],
                    icon: item.icon,
                    path: item.parentPath + "/" + item.path,
                    // path: path.resolve(item.parentPath, item.path)
                }
                menuList.push(sysMenu)
            })
            fastMenu.value = menuList
        }
    })
}
/** 打开快捷导航栏 */
const shortcutNavigationClick = () => {
    shortcutNavigation.value.init()
}
</script>
<script lang="ts">


export default {
    name: "DashboardIndex"
}
</script>
<style lang="scss">
.calendar-container {
    width: 600px;
    height: 400px;
}

.custom-calendar .el-calendar-day {
    height: 40px;
    /* 设置日期单元格的高度 */
}

.card-wrap-class {
    flex: 1;
    text-align: center;
    border-radius: 4px;
    transition: all ease-in-out 0.3s;
    height: 100px;
    position: relative;
    background: #fff;
    cursor: pointer;

    nav {
        font-size: 15px;
        color: #333;
    }

    h2 {
        margin-top: 1px;
    }

    .card-wrap-class-content {
        display: flex;
        height: 100%;
        justify-content: center;
        align-items: center;

        >img {
            height: 60px;
            margin-right: 5px;
        }

        div {
            width: 90px;
        }
    }

    .card-wrap-class-footer {
        width: 100%;
        height: 30%;
        text-align: center;
        border-top: 1px solid #e5e5e5;
        color: #0353d6;

        ::v-deep .el-button {
            font-size: 13px;
        }
    }
}

.home_header-no {
    position: relative;
    height: 100px;
    margin-bottom: 10px;
    border-radius: 4px;
    background: #fff;

    .img_left {
        position: absolute;
        left: 10px;
        top: 0;
        height: 100%;
    }

    .img_right {
        position: absolute;
        right: 0;
        top: 0;
        height: 100%;
    }

    >div {
        display: flex;
        flex-direction: column;
        justify-content: center;
        height: 100%;
        padding-left: 150px;

        >h2 {
            font-size: 20px;
            color: #0353d6;
        }
    }
}

.span {
    font-size: 15px;
    margin-left: 7px;
    position: absolute;
    margin-top: -17px;
}

::v-deep(.is-always-shadow) {
    height: 100%;
}

.svg-icon-nav {
    position: absolute;
    margin-top: -13px;
    margin-left: -12px;
}
</style>
